<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	
	
	
    <link rel="stylesheet" href="css/select2.css"/>
	    <!--   <script src="Select2 2.1_files/jquery.js"></script>
          <script src="Select2 2.1_files/bootstrap.min.js"></script> -->
		  <script src="Select2 2.1_files/select2.js"></script> 
	<style type="text/css">
		body{
			margin-top:50px;
		}
		.page-header{
			background-color:rgb(240, 245, 248);
		}
		
	</style>
	
</head>
<body>
	<div class="navbar navbar-fixed-top">
	  <div class="navbar-inner">
		<div class="container">
			<a class="brand" href="#">
			  <img src="img/user_group.png" alt="" />&nbsp;客户端管理系统
			</a>
			<ul class="nav">
			  <li >
				<a href="welcome.action">概览</a>
			  </li>
			  <li><a href="contacts.action">通讯录</a></li>
			  <!-- <li class="active"><a href="tasks.action">任务</a></li> -->
			    <li class="dropdown" id="menutest3">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest3">
				任务
				  <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				  <li><a href=""><i class="icon-user"></i>&nbsp;所有任务</a></li>
				  <li><a href="#"  id="suc"><i class="icon-ok"></i>&nbsp;已完成</a></li>
				  <li class="divider"></li>
				  <li ><a href="#" id="false" ><i class="icon-home"></i>&nbsp未完成</a></li>
				  <li><a href="new_chance.action"><i class="icon-star-empty"></i>&nbsp;过期任务</a></li>
				</ul>
			  </li>
			  
			  

			  <li><a href="chances.action">机会</a></li>
			  <li><a href="discuss.action">讨论</a></li>
			  
			  <li class="dropdown" id="menutest1">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">
				  添加
				  <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				  <li><a href="new_contact.action"><i class="icon-user"></i>&nbsp;联系人</a></li>
				  <li><a href="new_company.action"><i class="icon-home"></i>&nbsp;公司</a></li>
				  <li class="divider"></li>
				  <li ><a href="new_task.action"><i class="icon-ok"></i>&nbsp;任务</a></li>
				  <li><a href="new_chance.action"><i class="icon-star-empty"></i>&nbsp;机会</a></li>
				</ul>
			  </li>
			  
			</ul>
			<form class="navbar-search pull-left">
			  <input type="text" class="search-query" placeholder="Search">
			</form>
			
			<ul class="nav pull-right" >
			  <li>
				<a href="#">${user.username }</a>
			  </li>
			  <li class="dropdown" id="menutest2">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest2">
				  管理
				  <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				   <li><a href="manage_user.action?id=${sessionScope.user.id }"><i class="icon-user"></i>&nbsp;同事</a></li>
				  <li><a href="manage_group.action"><i class="icon-list-alt"></i>&nbsp;组</a></li>
				  <li class="divider"></li>
				<!--  <li><a href="user_update_user.action?id=${sessionScope.user.id }"><i class="icon-asterisk"></i>&nbsp;账号</a></li> -->
				  <li><a href="show_user_msg.action?id=${sessionScope.user.id }"><i class="icon-asterisk"></i>&nbsp;账号</a></li>
				</ul>
			  </li>
			  <li class="divider-vertical"></li>
			  <li><a href="sign_in.action">退出</a></li>
			</ul>
			
		</div>
	  </div>
	</div>
	
	<div class="container">
		
			<div class="row">
				  <div class="span2"></div>
				  <div class="span8" >
					
						<div class="page-header well" >
						  <h2 id="gf"><img src="img/tasks.png" alt="" />&nbsp;所有任务</h2>
						</div>	
						<div class="page-header well" id="result" >
							<table class="table" >
								<tbody id="ts" >
							   <c:forEach items="${pager.result}" var="t">
								<tr>
								  <td>
								  <%-- <img src="img/task.png" alt="" /><a href=""  style="font-size:16px;">${t.title}</a> --%>
								  <span style="margin-bottom:5px;display:block">${t.createtime}</span>
								   <span style="padding-left:0px;margin-top:5px">
								   <input name="check" type="checkbox" style="float:left" id="${t.taskuuid}" res="${t.id}" />
								  <c:choose>
								  <c:when test="${t.complete==true}"><span style="background-color:#09f011;">已完成</span></c:when>
								   <c:when test="${t.complete==false}"><!-- <div style="display:none" id="edit">hh</div> --><span style="background-color:red;" id="w">未完成</span></c:when>
								  </c:choose>
								  </span>
							<!-- 	  img/task.png -->
								 <!--  <img src="" alt="" /> --><a href=""  style="font-size:16px;">${t.title}</a>
								                        
								  <span style="padding-left:5px;margin-top:5px;display:block">截止时间：${t.enddate} 
								  
								  <c:choose>
								  <c:when test="${t.complete==true}">
								  <a href="#" style="margin-left:100px; display:none ">修改</a>
								</c:when>
								<c:when test="${t.complete==false}">
								<a href="updatetask.action?taskid=${t.id}" style="margin-left:100px;">修改</a>
								</c:when>
								</c:choose>
								</span>
								<%--   <br> <br>
								  <span> ${t.times}</span> --%>
								  </td>
								 
								</tr>
								</c:forEach> 
								<!-- <tr>
								  <td><img src="img/task.png" alt="" /><a href="">任务2</a></td>
								</tr>
								<tr>
								  <td><img src="img/task.png" alt="" /><a href="">任务3</a></td>
								</tr> -->
								
								
							 </tbody>
							</table>
						</div>	
						
				  </div>
				  
				  <div class="span4">
				  	<div class="page-header well">
						  <h3>
							<span>
							<a data-backdrop="static" href="addtask.action" data-toggle="modal"><img src="img/add_task.png" alt="" />添加任务</a>
							</span>
						  </h3>
							
						</div>	
						<div class="page-header well">
							<a href="#" style="font-size:18px;font-weight:bold;"><img src="img/add_task.png" alt="" />选择查看任务类型</a><br>
							<table class="table">
							<tr>
							<td>
							<div style="margin-top:5px;margin-bottom:5px;">
<span style="font-size:16px;font-weight:bold;"> 类  &nbsp;&nbsp; 别：</span><select style="font-size:16px;width: 170px; display: none;height:40px" id="e2" name="" class="ty">
				                      <option></option>
				                  <c:forEach items="${types}" var="s">
				                   <option >${s.type}</option>
				                   </c:forEach>
				                <!--    <option >邮件</option>
				                   <option >会议</option>
				                   <option >午休 </option> -->
			                         </select> 
			                    <!--     <input type="button" value="baoxu" id="ff"> -->
			                         	</div>
			                         	</td></tr>
			                         	 	<tr><td>
			                         	<div style="margin-top:5px;margin-bottom:5px;">
						          <span style="font-size:16px;font-weight:bold;">视  &nbsp;&nbsp;图：</span>
						          <select style="width: 170px; display: none;padding-top:30px" id="e3" name="">
				                   <option></option>
				                   <option>普通</option>
				                   <option >日历</option>
				               
			                         </select> 
							</div>
							</td>
							</tr>
							
							<tr>
							<td>
							<div style="margin-top:10px;margin-bottom:-20px;">
						 <span style="font-size:16px;font-weight:bold;"> 联系人：</span>
						      
						 <select style="width:170px; display: none;" id="e4" >
				                   <option></option>
				                  <c:forEach items="${c}" var="ss">
				                  <c:choose>
				                 <c:when test="${ss.name!=null}">
				                   <option>${ss.name}</option>
				                 </c:when>
				                 </c:choose>
				                   </c:forEach>
				                 
				                   
				                   <!-- <option >jerry</option> -->
				               
			                         </select> 
							    
							   </div> 
							   </td>
							  </tr>
							   </table> 
						</div>	
						
				  </div>
				</div>
			</div>
			
	
		</div>
		
		
		
		
<Script Language="JavaScript" type="text/JavaScript" src="js/showo_page.js"></Script>
          
<%-- 效果2:记录总数${pager.totalCount},每页${pager.pageSize}记录,前后显示4个<br>&nbsp;&nbsp;&nbsp; --%>
<Script Language=JavaScript>
   ShowoPage("","","<span style='margin-left:200px;'>页次:</span><font color='red'>","</font>/","<font color='red'>","</font>页&nbsp;","&nbsp;每页<font color='red'>","</font>条&nbsp;","&nbsp;共<font color='red'>","</font>个记录&nbsp;&nbsp;","首页","上一页","下一页","尾页","<br><br>&nbsp;<span style='margin-left:250px;'>跳转</span>:","<font color='red'>","</font>","[<font color='red'>","</font>]","","","&nbsp;","&nbsp;","${pager.totalCount}","${pager.pageSize}",2)
</Script> 	
		
		
		
	<script type="text/javascript">
	
		$(document).ready(function(){
	  
		
		 $("#e2").change(function(){
		  $("#ts").css("display","none");
		    $(".hh").css("display","none");
		   $(".hfal").css("display","none");
		      $("#result").text(" "); 
	       var  value=this.value;
	        // alert(value);
	       
	        if(value==""){
	            // $("#ts").css("display","block");
	               window.location.href="tasks.action";
	               return;
	        }  
		  
              	$.post("typs.action",{typ:value},function(m){
              	
              	 $(m).each(function(){
              	       var title=this.title;
		        var enddate=this.enddate;
		        var text="截止时间"+" "+enddate;
		        var complete=this.complete;
		        var type=this.taskType.type;
		        // alert(type);
		        var color="#"+this.taskType.color;
		        //alert(color);
		        
		          var div= $("<div>",{
		            "class":"types page-header well",
		             "id" :"cvs"
		          }).attr("style","font-size:16px;font-weight:bold;margin-top:0px").text(title);
		            var typediv=$("<span>"+type+"</span>").css({"background-color":color,"font-size":"16px","color":"white"});
		       if(complete){
		         var img=$("<img>").attr("src","img/camera_test.png").attr("style","padding-left:5px;padding-right:10px;withd:20px;height:20px");
		             }else{
		             img=$("<img>").attr("src","img/remove.png").attr("style","padding-left:5px;padding-right:10px;withd:20px;height:20px");
		             }
		             // div.append(type);
		              div.append(img);
		              div.append("<br>");
		              div.append(text);
		            
		             $("#result").append(typediv);
		              $("#result").append(div);
		       
		       });
              	      
              	 });
              	
               
		  });
		  
		 /*  
		   $("#ff").click(function(){
		  var t=value;
		 alert(t);
		 })  */
	   
		//未完成任务
		$("#false").click(function(){
		    $("#result").text("");
		  $(".hfal").css("display","none");
		  $("#ts").css("display","none");
		  $(".hh").css("display","none");
		   $(".types").css("display","none");
		
		  $("#gf").text("未完成");
		   $.post("false.action",function(json){
		       $(json).each(function(){
		       
		        var title=this.title;
		        var enddate=this.enddate;
		        var text="截止时间"+" "+enddate;
		          var div= $("<div>",{
		            "class":"hfal page-header well",
		             "id" :"cv"
		          }).attr("style","font-size:16px;font-weight:bold").text(title);;
		        
		       
		         var img=$("<img>").attr("src","img/remove.png").attr("style","padding-left:5px;padding-right:10px;withd:20px;height:20px");
		             
		             div.append(img);
		             div.append("<br>");
		              div.append(text);
		           $("#result").append(div);
		       
		       });
 		      
		      });
		});
		
		$("#hfal").css({fontSize:"16px"});
		
		//所有任务
		
		$("#all").click(function(){
		     $(".types").css("display","none");
		      $(".hh").css("display","none");
		      $(".hfal").css("display","none");
		      
	          $("#gf").text("所有任务");
	       
		      $("#ts").css("display","block");
		});
		
		
		
		
		    //已完成任务   
		$("#suc").click(function(){
		    $("#result").text("");
		 $(".hh").css("display","none");
		$("#gf").text("已完成");
		
		 $("#ts").css("display","none");
		 $(".hfal").css("display","none");
		 $(".types").css("display","none");
		 
		  var divs= $("<table>",{
		         "class":"table"
		         });
		
		$.post("suc.action",function(json){  
		        $(json).each(function(){
		            var title=this.title;
		            var taskuuid=this.taskuuid;
		            var  id=this.id; 
		          var div= $("<div>",{
		            "class":"hh page-header well",
		             "id" :"h"
		          }).attr("style","padding-left:5px;font-size:16px;font-weight:bold;padding-top:0px;padding-bottom:0px;").text(title);
		        
		       
		         var img=$("<img>").attr("src","img/camera_test.png");
		         div.append(img);
		     
		          var input= $("<input name='check' type='checkbox' style='float:left;margin-top:10px'  />").attr("id",taskuuid).attr("res",id);
		           
		          $("#result").append(input);
		          $("#result").append(div);
		        });
		     
		    });
		     
		    
		});
		    
		
		
		$("#e2").select2({
		
                placeholder: "Select a State",
                allowClear: true
			
            });
			
		$("#e3").select2({
		
                placeholder: "Select a State",
                allowClear: true
			
            });
		
		$("#e4").select2({
		
                placeholder: "Select a State",
                allowClear: true
			
            });
		
		});
		
		/*  $("#w").mouseover(function(){
		  alert("fdk");
		       $("#edit").css("display","block");
		  })
		   $("#w").onmouseout(function(){
		       $("#edit").css("display","none");
		  }); */
		  
		 
		  $("input").click(function(){
		      var taskid= $(this).attr("res");
		      var id= $(this).attr("id");
		      //alert(id);
		      var h="#"+id;
		      var check=$(this).attr("checked");
		      //alert(check);
		      if(check=="checked"){
		        if(confirm("确定要删除吗？")){
		          $.post("dealTask.action",{taskid:taskid},function(json){
		       
		        });
		            $(h).ajaxComplete(function(){
		              //  alert("fdf");
		               deltelim(this);
		    
		 });
		    
		        
		        }else{
		          $(this).attr("checked",false);
		        
		        }}
		  });
	 function deltelim(obj) {
			var div =  obj.parentNode.parentNode.parentNode;
			document.getElementById("ts").removeChild(div);
  };
			
	</script>
</body>
</html>